import React, {
    PureComponent
} from 'react';

import {
    Text,
    View,
    StyleSheet
} from 'react-native';

import moment from 'moment';

import {
    Tip,
    Avatar,
    FastImage,
    Layout,
    Loading,
    ListView,
    Empty
} from './../../components';

import ajax from './../../http';

import parseUrl from './../../utils/parseUrl';

import SwipeOut from 'react-native-swipeout';

import * as CONST from './../../const';

interface State {
    list: Array<any>
}

class BlockUser extends PureComponent<any, State> {
    state = {
        list: []
    }

    get lastId() {
        const {
            list = []
        } = this.state;
        const {
            length
        } = list;
        const {
            blockId = 0
        } = list[length - 1] || {} as any
        return blockId;
    }

    get renderList() {
        const {
            list = []
        } = this.state;
        return list;
    }

    getDescName(item:any) {
        const {
            age,
            location = {}
        } = item;

        const {
            cityName,
            countryName
        } = location;

        return [
            age,
            cityName,
            countryName
        ].filter(v => !!v).join(`,`)
    }

    getTime(created:number) {
        const _format = `MMM DD, YYYY HH:mm`;
        return moment(created * 1000).format(_format);
    }

    rightButton(index: number) {
        return [{
            text: 'Delete',
            backgroundColor: CONST.color,
            onPress: () => this._onDelete(index)
        }]
    }

    private _onDelete = async (index: number) => {
        const {
            list
        } = this.state;

        const {
            userId
        } = list[index];

        const _para = {
            userIds: [userId]
        }

        Loading.show();

        try {
            await ajax.post(
                `unblock/batch/user`, _para
            )
            list.splice(index, 1)
            this.setState({
                list: [...list]
            })
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close();
    }

    private _renderItem = ({item, index}:any) => {
        const {
            userName,
            avatorUrl,
            created
        } = item;

        return (
            <SwipeOut
                autoClose={true}
                style={styles.itemStyle}
                backgroundColor="transparent"
                right={this.rightButton(index)}
            >
                <View style={styles.itemRow}>
                    <Avatar
                        size={64}
                        url={parseUrl(avatorUrl)}
                    />
                    <View style={styles.itemContent}>
                        <Text style={styles.nickName}>
                            {userName}
                        </Text>
                        <Text style={styles.desc}>
                            {this.getDescName(item)}
                        </Text>
                    </View>
                    <Text style={styles.time}>
                        {this.getTime(created)}
                    </Text>
                </View>
            </SwipeOut>
        )
    }

    private _onRefresh = async (done:Function) => {
        this._fetchData(true, done)
    }

    private _onLoadPage = async (done:Function) => {
        this._fetchData(false, done)
    }

    private _fetchData = async (
        isRefresh: boolean,
        done: Function
    ) => {
        let _list = [];
        let _success = true;
        try {
            const _para = {
                limit: 20,
                lastId: isRefresh ? 0 : this.lastId
            }
            const {
                list
            } = this.state;
            _list = (
                await ajax.get(
                    `blocked/users`, _para
                )
            )
            const _newList = (
                !!isRefresh ? _list : list.concat(_list)
            )
            this.setState({
                list: _newList
            })
        }
        catch (e) {
            _success = false;
            Tip.warm({
                message: e.message
            })
        }
        done(_list, _success);
    }

    render() {
        return (
            <Layout
                scroll={false}
                padding={false}
                title="Blocked Member"
            >
                <ListView
                    data={this.renderList}
                    onLoadTop={this._onRefresh}
                    onLoadPage={this._onLoadPage}
                    renderItem={this._renderItem}
                    ListEmptyComponent={<Empty />}
                />
            </Layout>
        )
    }
}

export default BlockUser;

const styles = StyleSheet.create({
    itemRow: {
        paddingVertical:10,
        paddingHorizontal: 16,
        alignItems: `center`,
        flexDirection: `row`,
        backgroundColor:`#fff`
    },
    itemStyle: {
        borderBottomWidth: 1,
        borderColor: `#ececec`,
    },
    itemContent: {
        flex: 1,
        paddingLeft: 12
    },
    nickName: {
        fontSize: 16,
        color: `#333`
    },
    desc: {
        marginTop: 10,
        fontSize: 12,
        color: `#8A92AE`
    },
    time: {
        fontSize: 12,
        color: `#4A4A4A`
    },
    empty:{
        fontSize:16,
        color:`#4a4a4a`,
        paddingTop:12
    },
    emptyContent:{
        alignItems:`center`,
        justifyContent:`center`
    }
}) as any;